<template>
      <div class="form-dailog-warrper" v-show="showForm" ref="formDailog" id="formWarrper">
             <div class="close-dailog"></div>
             <div class="form-dailog">
                   <div class="from-alert">
                         <div class="from-alert__top">
                               <p class="big-text ">
                                     <span>好兄弟!</span><span>获得以下礼品!</span>
                               </p>
                               <p class="big-text mgb-56">别忘记那曾帮你拆过的Ta</p>
                               <p class="small-text">请填写以下信息,礼品将于7天内送到你手中</p>
                         </div>
                         <div class="from-alert__b" id="scrollEvent" ref="scrollEvent">
                               <form method="post">
                                      <label for="name" class="common-lable" :class="{'nerror':nameError}">
                                             <span>收件人 :</span>
                                            <input type="text" class="from-alert__name common-input" id="name" v-model="name" @blur="confirmName" @focus="tiaoshi">  
                                             <i class="iconfont icon-yichang error-style" v-show="nameError"></i>  
                                            <i class="iconfont icon-chenggong error-style" v-show="nameSuccess"></i>  
                                   </label>
                                    <label for="tel" class="common-lable" :class="{'terror':telError}">
                                           <span>联系电话 :</span>
                                           <input type="number" maxlength="11" class="from-alert__tel common-input" id="tel" v-model="tel" @blur="confirmTel" @focus="tiaoshi">
                                           <i class="iconfont icon-yichang error-style" v-show="telError"></i>
                                           <i class="iconfont icon-chenggong error-style" v-show="telSuccess"></i>  
                                     </label>
                                     <label for="adress" class="common-lable" :class="{'aerror':adressError}">
                                            <span>收件地址 :</span>
                                            <input type="text"  class="from-alert__adress common-input" id="adress" v-model="adress " @blur="confirmAdress" @focus="tiaoshi">
                                            <i class="iconfont icon-yichang error-style" v-show="adressError"></i> 
                                            <i class="iconfont icon-chenggong error-style" v-show="adressSuccess"></i> 
                                      </label>
                                </form>
                         </div>
                         <button class="from-alert__btn" @click="submitInfo">提交</button>
                  </div>
            </div>
     </div>
</template>
<script>
  export default {
    data () {
      return {
        name: '',
        tel: '',
        adress: '',
        showForm:false,
        telError: false,
        nameError: false,
        adressError: false,
        nameSuccess: false,
        telSuccess: false,
        adressSuccess: false
      }
    },
    mounted () {
      this.closeScroll ()
    },
    methods: {
      // 打开form表单弹窗
      openForm () {
      	window.scrollTo(0,0)
        this.showForm = true
        document.getElementsByTagName('body')[0].style.position= 'relative'
        document.getElementsByTagName('body')[0].style.overflow= 'hidden'
        document.querySelector('.share-warrper').style.display = 'none'
      },
      closeScroll () {
        // document.addEventListener('scroll',function(){
        // 	document.querySelector('#formWarrper').style.position = 'fixed'
        // })
      },
      // 姓名验证
      confirmName () {
      // document.querySelector('#formWarrper').style.position = 'fixed'
        if (!(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/.test(this.name))) {
          this.nameError = true
          } else {
          this.nameError = false
          this.nameSuccess = true
          }
        },
    // 电话号码验证
      confirmTel () {
      // document.querySelector('#formWarrper').style.position = 'fixed'
        if (!(/^1[34578]\d{9}$/.test(this.tel))) {
          this.telError = true
          } else {
          this.telError = false
          this.telSuccess = true
           }
        },
    // 地址验证
    confirmAdress () {
      // document.querySelector('#formWarrper').style.position = 'fixed'
      if (this.adress === '') {
        this.adressError = true
        } else {
        this.adressError = false
        this.adressSuccess = true
        }
    },
    tiaoshi () {
        // window.scrollTo(0,0)
        // this.$refs.warrper.style.position=  'absolute'
        // document.getElementsByTagName('body')[0].style.overflow = 'hidden'
        // document.getElementsByTagName('body')[0].style.position = 'absolute'
        this.$refs.formDailog.style.position = 'absolute'
    },
    // 提交信息
    submitInfo () {
      if (!(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/.test(this.name))) {
        this.nameError = true
        return false
        }
      if (!(/^1[34578]\d{9}$/.test(this.tel))) {
        this.telError = true
        return false
        }
      if (this.adress === '') {
        this.adressError = true
        return false
        }
        this.showShare = !this.showShare
        this.showInfo = !this.showInfo
        this.receive = !this.receive
        localStorage.setItem('recordSubmit', 1)
        this.stopBodyScroll(this.showShare)
      },
    }
  }
</script>
<style lang="less">
@import '../common/style/common.less';
.form-dailog-warrper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: #fff;
    z-index: 100;
}
.close-dailog {
  position: absolute;
  top: 0.533333rem;
  right: 0.533333rem;
  width: 0.36rem;
  height: 0.36rem;
  .bg-image('../images/close');
  background-size: cover;
}
.form-dailog{
	    position: absolute;
    top: 50%;
    /* left: 50%; */
    width: 100%;
    transform: translate(0,-50%);
    text-align: center;
}
.from-alert {
  padding: 1.466667rem 0.746667rem 1.066667rem 0.746667rem;
  .big-text {
    color: #000;
    .font-dpr(15px);
    font-weight: bold;
    line-height: 1.5
  }
  .mgb-56 {
    margin-bottom: 0.746667rem;
  }
  .small-text {
    .font-dpr(12px);
    margin-bottom: 0.4rem;
  }
  .nerror, .terror, .aerror{
    border: 1px solid #ff0000 !important;
  }
  .common-lable {
    display: flex;
    align-items: center;
    margin-bottom: 0.346667rem;
    border: 1px solid #ccc;
    >span {
      color: #aaa;
      .font-dpr(12px);
      padding-left: 0.32rem;
    }
  }
  .error-style {
    color: #ff0000;
    .font-dpr(18px);
     margin-right: 0.133333rem;
  }
  .common-input {
    flex: 1;
    height: 0.933333rem;
    .font-dpr(12px);
    color: #aaa;
    padding-left: 0.16rem;
    border-radius: 2px;
    box-sizing: border-box;
  }
  &__adress {
    margin-bottom: 0 !important;
  }
  &__btn {
    width: 3.413333rem;
    .line-height(1.066667rem, 1.066667rem);
    color: #fff;
    .font-dpr(17px);
    font-weight: bold;
    background: rgb(206, 55, 55);
    margin-top: 1.066667rem;
    box-shadow: 0px 2px 2px 1px rgba(255, 55, 55, 0.5);
  }
}	
</style>